<template>
  <a-card :bordered='false'>

    <!-- 查询区域 -->
    <div class='table-page-search-wrapper'>
      <a-form layout='inline'>
        <a-row :gutter='12'>
          <a-col :md='4' :sm='8'>
            <a-form-item label='访客姓名'>
              <a-input placeholder='请输入访客姓名' v-model='queryParam.visitName'></a-input>
            </a-form-item>
          </a-col>
          <a-col :md='4' :sm='8'>
            <a-form-item label='访客身份证'>
              <a-input placeholder='请输入访客身份证' v-model='queryParam.cardNum'></a-input>
            </a-form-item>
          </a-col>
          <a-col :md='4' :sm='8'>
            <a-form-item label='访客手机号'>
              <a-input placeholder='请输入访手机号' v-model='queryParam.visitMobile'></a-input>
            </a-form-item>
          </a-col>

          <a-col :md='5' :sm='4'>
            <a-form-item label='授权时间'>
              <a-date-picker showTime format='YYYY-MM-DD HH:mm:ss' placeholder='开始时间' v-model='queryParam.opTime_begin'
                             @change='onChangeStartTime' />
            </a-form-item>
          </a-col>
          <a-col :md='5' :sm='4'>
            <a-form-item>
              <a-date-picker showTime format='YYYY-MM-DD HH:mm:ss' placeholder='结束日期' v-model='queryParam.opTime_end'
                             @change='onChangeEndTime' />
            </a-form-item>
          </a-col>

          <a-col :md='4' :sm='8'>
            <span style='float: left;overflow: hidden;' class='table-page-search-submitButtons'>
              <a-button type='primary' @click='searchQuery' icon='search'>查询</a-button>
              <a-button type='primary' @click='searchReset' icon='reload' style='margin-left: 8px'>重置</a-button>

            </span>
          </a-col>

        </a-row>
      </a-form>
    </div>


    <!-- table区域-begin -->
    <div>
      <a-table
        ref='table'
        size='middle'
        bordered
        rowKey='id'
        :columns='columns'
        :dataSource='dataSource'
        :pagination='ipagination'
        :loading='loading'
        :rowSelection='{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}'
        @change='handleTableChange'>

        <span slot='action' slot-scope='text, record'>
          <a @click='handleEdit(record)'>编辑</a>

          <a-divider type='vertical' />
          <a-dropdown>
            <a class='ant-dropdown-link'>更多 <a-icon type='down' /></a>
            <a-menu slot='overlay'>

              <a-menu-item>
                <a-popconfirm title='确定删除吗?' @confirm='() => handleDelete(record.id)'>
                  <a>删除</a>
                </a-popconfirm>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </span>

      </a-table>
    </div>
    <!-- table区域-end -->

    <!-- 表单区域 -->
    <VisitorLogModalAddAndEdit ref='modalForm' @ok='modalFormOk'></VisitorLogModalAddAndEdit>
  </a-card>
</template>

<script>
import VisitorLogModalAddAndEdit from './modules/VisitorLogModalAddAndEdit'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { deleteAction, downFile, getAction } from '@/api/manage'
import { filterObj } from '@/utils/util'
import { postAction } from '@api/manage'

export default {
  name: 'VisitorLogList',
  mixins: [JeecgListMixin],
  components: {
    VisitorLogModalAddAndEdit
  },
  data() {
    return {
      idList: [],
      deleteParams: {},

      houses: [],
      people: [],
      description: '访客记录管理页面',
      // 表头
      columns: [
        {
          title: '项目名称',
          align: 'center',
          dataIndex: 'projectName'
        },
        {
          title: '业主姓名',
          align: 'center',
          dataIndex: 'userName'
        },
        {
          title: '访客姓名',
          align: 'center',
          dataIndex: 'visitName'
        },
        {
          title: '访客手机号',
          align: 'center',
          dataIndex: 'visitMobile'
        },
        {
          title: '访客身份证',
          align: 'center',
          dataIndex: 'cardNum'
        },
        {
          title: '登记类型',
          align: 'center',
          dataIndex: 'registerType',
          customRender: (record) => {
            if (record == '' || record == null) {
              return
            }
            if (record == '1') {
              return '微信小程序'
            } else {
              return '线下登记'
            }
          }
        },
        {
          title: '来访类型',
          align: 'center',
          dataIndex: 'sourceType',
          customRender: (record) => {
            if (record == '' || record == null) {
              return
            }
            if (record == '1') {
              return '业主邀请'
            } else {
              return '亲友来访'
            }
          }
        },

        {
          title: '访问房屋',
          align: 'center',
          dataIndex: 'visitHouse'
        },

        {
          title: '访客车牌号',
          align: 'center',
          dataIndex: 'visitVehicleNo'
        },
        {
          title: '访客类型',
          align: 'center',
          dataIndex: 'visitType',
          customRender: (record) => {
            if (record == '' || record == null) {
              return
            }
            if (record == '1') {
              return '亲朋'
            } else {
              return '同事'
            }
          }
        },

        {
          title: '备注',
          align: 'center',
          dataIndex: 'remark'
        },

        {
          title: '实际到访时间',
          align: 'center',
          dataIndex: 'visitTime'
        }

      ],
      url: {
        list: '/visitorLog/visitorLog/list',
        delete: '/visitorLog/visitorLog/delete',
        deleteBatch: '/visitorLog/visitorLog/deleteBatch',
        exportXlsUrl: 'visitorLog/visitorLog/exportXls',
        importExcelUrl: 'visitorLog/visitorLog/importExcel'

      },
      queryParam: {
        'opTime_begin': '',
        'opTime_end': '',
        'type': '-1',
        'createUser': '',
        'cardNum': '',
        'visitName': '',
        'visitMobile': '',
        // "visitVehicleNo":"",
        // "platFormType" :"",
        // "name":null,
        'sourceType': null


      },
      isorter: {
        column: 'createTime',
        order: 'desc'
      },
      nameList: [{ value: null, label: '请选择平台类型' }, { value: '1', label: '洛阳项目4444' }, {
        value: '洛阳项目5',
        label: '洛阳项目44444'
      }, { value: '3', label: '蓝卡云平台' }
      ],

      sourceType: [{ value: null, label: '请选择来访类型' }, { value: '1', label: '业主邀请' }, { value: '2', label: '亲友来访' }
      ]
    }
  },
  computed: {
    importExcelUrl: function() {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    }
  },
  created() {
    console.log('初始化')
    this.keyupEnter()

  },
  methods: {



    onChangeStartTime(date, dateString) {
      this.queryParam.visitTime = dateString
    },

    onChangeEndTime(date, dateString) {
      this.queryParam.opTime_end = dateString
    },


    loadData(arg) {
      if (!this.url.list) {
        this.$message.error('请设置url.list属性!')
        return
      }
      //加载数据 若传入参数1则加载第一页的内容
      if (arg === 1) {
        this.ipagination.current = 1
      }
      var params = this.getQueryParams()//查询条件
      this.loading = true
      getAction(this.url.list, params).then((res) => {
        if (res.success) {
          this.dataSource = res.result.records
          this.ipagination.total = res.result.total
        }
        if (res.code === 510) {
          this.$message.warning(res.message)
        }
        this.loading = false
      })
    },

    searchQuery() {
      let startTime = this.queryParam.opTime_begin
      let endTime = this.queryParam.opTime_end

      if (startTime != '' && endTime != '') {
        if (startTime > endTime) {
          this.$message.error('开始时间不能大于结束时间')
          return
        }
      }

      if (startTime == '' && endTime != '') {
        this.$message.error('请选择开始时间')
        return
      }

      if (startTime != '' && endTime == '') {
        this.$message.error('请选择结束时间')
        return
      }
      this.loadData(1)
    },

    getQueryParams() {

      let param = Object.assign({}, this.isorter, this.queryParam)
      param.field = this.getQueryField()
      param.pageNo = this.ipagination.current
      param.pageSize = this.ipagination.pageSize
      if (this.queryParam.opTime_begin != '' && this.queryParam.opTime_end != '') {
        param.opTime_begin = ""
        param.opTime_end = ""
      }
      return filterObj(param)
    },


    batchDel: function() {
      //批量删除
      this.idList = []
      this.deleteParams = { ids: '' }

      if (!this.url.deleteBatch) {
        this.$message.error('请设置url.deleteBatch属性!')
        return
      }
      if (this.selectedRowKeys.length <= 0) {
        this.$message.warning('请选择一条记录！')
        return
      } else {
        //var ids = "";
        for (var a = 0; a < this.selectionRows.length; a++) {
          //ids += this.selectionRows[a].invateuserdetailId + ",";
          this.idList.push(this.selectionRows[a].id)
        }
        this.deleteParams.ids = this.idList + ''
        var that = this
        this.$confirm({
          title: '确认删除',
          content: '是否删除选中数据?',
          onOk: function() {
            postAction(that.url.deleteBatch, that.deleteParams).then((res) => {
              if (res.success) {
                that.$message.success(res.message)
                that.loadData()
                that.onClearSelected()
              } else {
                that.$message.warning(res.message)
              }
            })
          }
        })
      }
    },
    //单次删除
    handleDelete: function(invateuserdetailId) {

      this.idList = []
      this.deleteParams = { ids: '' }
      this.idList.push(invateuserdetailId)
      this.deleteParams.ids = this.idList + ''

      if (!this.url.delete) {
        this.$message.error('请设置url.delete属性!')
        return
      }
      var that = this
      //deleteAction(that.url.delete, {invateuserdetailId: invateuserdetailId}).then((res) => {
      postAction(that.url.delete, this.deleteParams).then((res) => {
        if (res.success) {
          that.$message.success(res.message)
          that.loadData()
        } else {
          that.$message.warning(res.message)
        }
      })
    },


    keyupEnter() {
      document.onkeydown = e => {
        let body = document.getElementsByTagName('body')[0]
        if (e.keyCode === 13) {
          this.loadData(1)
        }
      }
    }

  }
}
</script>
<style scoped>
@import '~@assets/less/common.less'
</style>